<template>
	<view class="container">
		<view class="container__des">本月({{count}})</view>
		<view class="container__wrapper">
			<z-paging ref="paging" class="z-paging" style="margin-top: 80rpx;" v-model="list" @query="queryList">
				<view class="container__wrapper--item" v-for="item in list" :key="item.Id" @click="goProcess(item)">
					<view class="container__wrapper--item-title">
						<view class="container__wrapper--item-title__left">{{item.FlowName}}</view>
						<view class="container__wrapper--item-title__time">{{item.time}}</view>
					</view>
					<view class="container__wrapper--item-content">{{item.FlowBrief.replace(/\|/g,'\n')}}</view>
					<view class="container__wrapper--item-bottom">
						<view class="container__wrapper--item-bottom__left">
							<view class="container__wrapper--item-bottom__left--avator">
								<avator :avator="item.avator" :name="item.CreateUser"></avator>
							</view>
							<view class="container__wrapper--item-bottom__left--text">由{{item.CreateUser}}提交</view>
						</view>
						<view class="container__wrapper--item-bottom__status" :style="{'color': item.statusColor}" v-show="item.FlowState != 0">{{item.statusText}}</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import Avator from '@/components/custom/avator/avator.vue'
	
	export default {
		components: {
			Avator
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				count: 0,
				insflowid: '',
				list: [],
				currentpage: 1,
				pagesize: 10,
			}
		},
		onLoad(options) {
			this.count = options.count;
			this.insflowid = options.insflowid;
		},
		methods: {
			/**
			 * 获取用户历史相同流程列表
			 */
			getUserHistoryFlowList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getUserHistoryFlowList',
						pagesize: this.pagesize,
						currentpage: this.currentpage,
						apiparam: {
							InsFlowId: this.insflowid,
						},
						success(res) {
							if(!res.length) return
							res.forEach(item => {
								that.setPorcessStatus(item)
							})
							that.$refs.paging.complete(that.formatFlowList(res));
						}
					})
				})
			},
			/**
			 * 处理返回的列表数据
			 * @param {Object} v 列表数据
			 */
			formatFlowList(v) {
				v.forEach(item => {
					item.avator = this.static_avator + "/static/photo/user/" + item.CreatePxid + "/70.jpg";
					item.time = moment(item.CreateTime).format('YYYY-MM-DD');
				})
				return v
			},
			/**
			 * 分页请求的方法(初始化会执行，相当于写在onload中)
			 * @param {Object} pageNo	当前页码
			 * @param {Object} pageSize		每页数量
			 */
			queryList(pageNo, pageSize) {
				this.pagesize = pageSize;
				this.currentpage = pageNo;
				this.getUserHistoryFlowList()
			},
			/**
			 * 跳转到流程详情页
			 * @param {Object} v
			 */
			goProcess(v) {
				uni.navigateTo({
					url: '../' + v.FlowRouter + '/index?data=' + JSON.stringify(v)
				})
			},
			/**
			 * 设置流程状态
			 */
			setPorcessStatus(v) {
				switch(v.FlowState) {
					case '1':
						v.statusText = '审批通过';
						v.statusColor = '#19be6b';
						break;
					case '-1':
						v.statusText = '审批拒绝';
						v.statusColor = '#fa3534';
						break;
					case '-3':
						v.statusText = '已撤回';
						v.statusColor = '#aaa';
						break;
					case '-4':
						v.statusText = '已撤销';
						v.statusColor = '#aaa';
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		
		&__des {
			height: 60rpx;
			font-size: 30rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
			border-bottom: 1rpx solid #eee;
		}
		
		&__wrapper {
			
			&--item {
				background-color: #fff;
				margin: 0 25rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				
				&-title {
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					&__left {
						font-size: 35rpx;
					}
					
					&__time {
						font-size: 25rpx;
						color: #aaa;
					}
				}
				
				&-content {
					color: #aaa;
					font-size: 25rpx;
					white-space: pre-wrap;
				}
				
				&-bottom {
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					&__left {
						display: flex;
						align-items: center;
						height: 100%;
						&--avator {
							width: 60rpx;
							height: 60rpx;
							margin-right: 10rpx;
						}
					}
					
					&__status {
						font-size: 25rpx;
						padding: 10rpx;
						background-color: rgba(231, 145, 145, 0.1);
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>
